<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" href="../css/zhibo.css">
    <style>
        body, html {
            background-image: url(../image/bj.png);
            background-size: 100% 800px;
        }
    </style>
</head>
<body>

<div id="playercontainer"></div>
<br>


<!--广告位-->
<div class="fx-box">

    <img id="bpic" src="https://i.loli.net/2018/09/23/5ba6bf0ebf690.png"
         style="border-radius:0.5rem;box-shadow:0.1rem 0.1rem 0.4rem rgba(99, 99, 99, 0.3);"
         onclick="imgUrl('http://leei.letuj.com')">
</div>


<div class="aui-tab" style=" background: #fff; ">
    <div class="tab-panel">
        <div class="tab-panel-item tab-active">
            <div class="tab-item">
                <a class="aui-flex b-line">

                    <div class="aui-flex-box">
                        <p>
                            <em class="aui-group-three" style=" font-size: 12px; "> 最新热门电影推荐</em>
                        </p>

                    </div>
                </a>

            </div>
        </div>


    </div>
</div>


<!-- 视频列表 -->
<div class="v-list-wrap" id="liveList">
    <ul class="clearfix" id="div_list">

    </ul>
</div>
<!-- 视频列表 end-->

</body>
<script type="text/x-dot-template" id="template">
    {{~ it.msg : value : index }}
    <li onclick="openWin('{{= value. url }}')">
        <div class="video-mask-box">
            <img src="{{= value. img }}" alt="" class="game-pic">
        </div>
        <div class="til">{{= value. title }}</div>

    </li>
    {{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/cyberplayer.js"></script>
<script src="../script/video.min.js"></script>
<script src="../script/videojs-contrib-hls.min.js"></script>
<script src="../script/videojs-contrib-quality-levels.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>

<script type="text/javascript">
    var api_url = localStorage.getItem('api_url');


    /////  初始化执行   S /////
    /////  apiready  一打开就执行的 函数
    apiready = function () {

        ////加载播放器  s  /////
        var player = cyberplayer("playercontainer").setup({
            width: api.winWidth,
            //  height: 200,
            file: api.pageParam.video, // <—rtmp or flv直播地址
            fallbackfile: api.pageParam.video, // <— 备用播放地址，为了手机上能进行直播，设置hls直播流
            controlbar: {
                barLogo: false,
                autostart: true
            },
            stretching: "uniform",
            volume: 100,
            controls: true,
            ak: "dfd6c7951d4c477bb2555496c8e97166" // 公有云平台注册即可获得accessKey
        });

        player.play();

        player.on('fullscreen', function (ret) {
            //alert( JSON.stringify( ret ) );
            if (ret.fullscreen) {
                api.setScreenOrientation({
                    orientation: 'landscape_right'
                });
            } else {
                api.setScreenOrientation({
                    orientation: 'portrait_up'
                });
            }
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            api.setScreenOrientation({
                orientation: 'portrait_up'
            });
            api.closeWin();
        });

        ////加载播放器  e  /////


        /////  加载推荐影片数据   S  ////
        api.showProgress({
            title: '加载中...',
            modal: false
        });
        var div_list = $api.byId('div_list');
        var template = $api.byId('template');
        api.ajax({
            url: 'http://42.51.194.10//login/login/tjlist.html',
            method: 'get'
        }, function (ret, err) {
            if (ret) {
                //alert( JSON.stringify( ret ) );
                var pagefn = doT.template(template.text);
                div_list.innerHTML = pagefn(ret);
                api.hideProgress();
            } else {
                api.hideProgress();
                //alert( JSON.stringify( err ) );
            }
        });
        /////  加载推荐影片数据  e  ////
    }
    /////  初始化执行   E /////


    //////////////////////    播放器下方推荐影片打开 方法 openWin  S  //////////////////////
    function openWin(name) {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name: 'vplay1_win',
            url: 'vplay1_win.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            pageParam: {video: name}
        });
    }

    //////////////////////    播放器下方推荐影片打开 方法 openWin  E  //////////////////////


    //////////////////////    图片广告打开 方法 imgUrl  S  //////////////////////
    function imgUrl(url) {
        api.openWin({
            name: 'h5',
            url: './h5.html',
            pageParam: {
                url: url
            }
        });
    }

    //////////////////////    图片广告打开 方法 imgUrl  E  //////////////////////
</script>


</html>
